<template>
    <div>
      <div id="box">
        <header>
          <div>
            <img src="/static/img/back.png" alt="" @click="backClick">
            <span>我的八百方</span>
          </div>
          <div>
            <img src="/static/img/客服.png" alt="">
            <img src="/static/img/更多01.png" alt="">
          </div>
        </header>
        <main>
          <div id="user">
            <img src="/static/img/download.png" alt="">
            <div id="user-c">
              <span>{{usermsg.username}}</span>
              <p>注册成为会员</p>
            </div>
          </div>
          <div id="domian">
            <div>
              <img src="/static/img/购物车.png" alt="">
              购物车
            </div>
            <div class="domain-cell">
              <span>0</span>
              <p>积分</p>
            </div>
            <div class="domain-cell">
              <span>4</span>
              <p>红包</p>
            </div>
            <div class="domain-cell">
              <span>9</span>
              <p>购物券</p>
            </div>
          </div>
          <div id="center">
            <div id="c-top">
              <span>全部订单</span>
              <img src="/static/img/更多02.png" alt="">
            </div>
            <div id="c-bottom">
              <div>
                <img src="/static/img/待付款.png" alt="">
                <p>待付款</p>
              </div>
              <div>
                <img src="/static/img/待收货.png" alt="">
                <p>待收货</p>
              </div>
              <div>
                <img src="/static/img/待评价.png" alt="">
                <p>待评价</p>
              </div>
              <div>
                <img src="/static/img/订单.png" alt="">
                <p>退款订单</p>
              </div>
            </div>
          </div>
          <div id="bottom">
            <div>
              <img src="/static/img/收 藏.png" alt="">
              <span>我的收藏</span>
            </div>
            <div>
              <img src="/static/img/定位.png" alt="">
              <span>地址管理</span>
            </div>
            <div>
              <img src="/static/img/账号.png" alt="">
              <span>账号管理</span>
            </div>
            <div>
              <img src="/static/img/个人资料.png" alt="">
              <span>个人资料</span>
            </div>
            <div @touchstart="logout">
              <img src="/static/img/退出.png" alt="">
              <span>退出登录</span>
            </div>
          </div>
        </main>
      </div>
    </div>
</template>

<script>
    export default {
      methods:{
        backClick: function () {
          history.back()
        },
        logout:function () {
          this.http.post("/api/users/logout")
            .then(res => {
              localStorage.setItem('usermsg',"")
              this.$layer.msg(res.data.msg)
              location.hash = '/'
            })
        }
      },
      mounted:function () {
        this.usermsg = JSON.parse(localStorage.getItem('usermsg'));
      },
      data:function () {
        return {
          usermsg:{}
        }
      }
    }
</script>

<style scoped>
  #box {
    height: 100vh;
    background-color: rgb(245, 245, 245);
  }

  header {
    background-color: rgb(0, 71, 156);
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
  }
  header div{
    display: flex;
    align-items: center;
  }
  header div span{
    color: white;
    margin-left: 12px;
    position: relative;
    top: -2px;
  }
  #user{
    height: 100px;
    background-image: url("/static/img/personal_bg.png");
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }
  #user img{
    width: 60px;
    height: 60px;
    margin: 0 16px;
  }
  #user-c{
    font-size: 16px;
  }
  #user-c span{
    display: inline-block;
    margin-bottom: 12px;
    color: rgba(28, 28, 110, 0.95);
  }
  #user-c p{
    color: white;
    font-size: 14px;
  }
  #domian{
    display: flex;
    align-items: center;
    height: 54px;
    border-bottom: solid 1px rgba(183, 183, 183, 0.76);
    background-color: white;
    color: lightslategray;
    margin-bottom: 12px;
  }
  #domian div:nth-of-type(1){
    display: flex;
    align-items: center;
    width: 40vw;
    justify-content: center;
    border-right: 1px solid #aaaaaa;
    font-size: 16px;
  }
  #domian div:nth-of-type(1) img{
    width: 16px;
    margin-right: 4px;
  }
  .domain-cell{
    width: 20vw;
    text-align: center;
  }
  .domain-cell span{
    color: red;
    font-size: 14px;
  }
  .domain-cell p{
    font-size: 14px;
  }
  #center{
    padding: 2px 12px;
    background-color: white;
    border-bottom: solid 1px #cccccc;
    border-top: solid 1px #cccccc;
    margin-bottom: 12px;
  }
  #c-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    border-bottom: solid 1px #dddddd;
  }
  #c-top img{
    width: 20px;
  }
  #c-bottom{
    display: flex;
    height: 57px;
    margin-top: 12px;
  }
  #c-bottom div{
    width: 25vw;
    text-align: center;
    font-size: 14px;
  }
  #c-bottom div img{
    width: 24px;
  }
  #bottom{
    background-color: white;
    padding: 0 12px;
    border-bottom: solid 1px #cccccc;
    border-top: solid 1px #cccccc;
  }
  #bottom div{
    height: 58px;
    border-bottom: solid 1px #dddddd;
    display: flex;
    align-items: center;
  }
  #bottom div img{
    width: 20px;
    margin-right: 16px;
  }
</style>
